<template>
  <div class="taskList-container">
      <div class="searchItem">
          <el-select class="selectItem selectStatu" v-model="searchMsg.taskStatu" placeholder="任务状态">
                <el-option
                v-for="item in taskStatu"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-select class="selectItem selectType" v-model="searchMsg.taskTypes" placeholder="类型">
                <el-option
                v-for="item in taskTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-select class="selectItem selectlevel" v-model="searchMsg.tesklevel" placeholder="优先级">
                <el-option
                v-for="item in tesklevel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
             <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="searchMsg.teskKword"
                style="width: 20%;"
                >
            </el-input>

            <el-button type="primary" class="addBtn">创建任务</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{textAlign: 'center'}"
        @cell-click="checkDetail"
        >
        <el-table-column
        fixed
        prop="date"
        label="创建时间"
        width="120">
        </el-table-column>
        <el-table-column
        prop="name"
        label="任务名称"
        width="280">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
                <span :class="scope.row.status | taskStatusColor">{{scope.row.status | taskStatus}}</span>
            </template>
        </el-table-column>
        <el-table-column
        prop="specified"
        label="指定人"
        width="80">
        </el-table-column>
        <el-table-column
        prop="priority"
        label="优先级"
        width="100">
        </el-table-column>
        <el-table-column
        prop="type"
        label="类型"
        width="100">
        </el-table-column>
        
        <el-table-column
            prop="originator"
            label="发起人"
            width="120">
        </el-table-column>

        <el-table-column
            prop="questions"
            label="问题"
            width="120">
        </el-table-column>
        
        <el-table-column
            prop="acceptance"
            label="验收人"
            width="120">
        </el-table-column>

        <el-table-column prop="zip" label="验收状态" width="120" fixed="right">
            <template slot-scope="scope">
                <span :class="scope.row.acceptanceStatus | accStatusColor">{{scope.row.acceptanceStatus | accStatus}}</span>
            </template>
        </el-table-column>
    </el-table>

    <div class="pagination">
        <pagination  :total="params.total" :page="params.page" :limit="params.limit" @pagination="handleSizeChange"  />
    </div>  


    <el-dialog
      title="任务详情"
      :visible.sync="detailisShow"
      width="25%"
      :close-on-click-modal="false"
    >
      <div>
          <el-row :gutter="30" justify='space-between'>
            <el-col :span="12">
                <div class="sub-title">类型</div>
                <el-input
                    placeholder="请输入类型"
                    v-model="tableDetail.type"
                    :readonly="isDisabled">
                </el-input>
            </el-col>

            <el-col :span="12">
                <div class="sub-title">验收情况</div>
                <el-input
                    placeholder="请输入验收情况"
                    v-model="tableDetail.acceptanceStatus"
                    :readonly="isDisabled">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="0" justify='space-between'>
            <el-col :span="24">
                <div class="sub-title">任务标题</div>
                <el-input
                    placeholder="请输入任务标题"
                    v-model="tableDetail.name"
                    :readonly="isDisabled">
                </el-input>
            </el-col>
        </el-row>

        <el-row :gutter="0" justify='space-between'>
            <el-col :span="24">
                <div class="sub-title">任务问题</div>
                <el-input
                    placeholder="请输入任务问题"
                    v-model="tableDetail.questions"
                    :readonly="isDisabled">
                </el-input>
            </el-col>
        </el-row>

        <el-row :gutter="30" justify='space-between'>
            <el-col :span="12">
                <div class="sub-title">指定人</div>
                <el-input
                    placeholder="请输入指定人"
                    v-model="tableDetail.specified"
                    :readonly="isDisabled">
                </el-input>
            </el-col>

            <el-col :span="12">
                <div class="sub-title">验收人</div>
                <el-input
                    placeholder="请输入验收人"
                    v-model="tableDetail.acceptance"
                    :readonly="isDisabled">
                </el-input>
            </el-col>
        </el-row>

        <el-row :gutter="30" justify='space-between'>
            <el-col :span="12">
                <div class="sub-title" style="color: red;">优先级</div>
                <el-input
                    placeholder="请输入优先级"
                    v-model="tableDetail.priority"
                    :readonly="isDisabled"
                    >
                </el-input>
            </el-col>

            <el-col :span="12">
                <div class="sub-title">任务状态</div>
                <el-input
                    placeholder="请输入任务状态"
                    v-model="tableDetail.status"
                    :readonly="isDisabled"
                    >

                </el-input>
            </el-col>
        </el-row>
        

      </div>
      
      
      <span slot="footer" class="dialog-footer">
        <!-- <div class="footerDate">123</div> -->
        <!-- <el-button @click="dailyisShow = false">取 消</el-button> -->
        <el-button type="primary" @click="closeDetail">关闭</el-button>
      </span>
    </el-dialog>




  </div>
</template>

<script>
import pagination from '@/components/Pagination/index'
export default {
  name: 'taskList',
  components: {
    pagination
  },
  data() {
    return {
       params: {
          page: 1,
          limit: 10,
          total: 100
       },
       searchMsg: {
           taskStatu: '',
           taskTypes: '',
           tesklevel: '',
           teskKword: ''
       },
       taskStatu: [{value: 1, label: '进行中'},{value: 2, label: '已完成'}],
       taskTypes: [{value: 1, label: '测试'},{value: 2, label: '开发'}],
       tesklevel: [{value: 1, label: '紧急'},{value: 2, label: '不紧急'}],
       tableData: [
          {
            date: '2016-05-03',
            name: '首页样式分布不均匀需要修改',
            status: '1',
            specified: '张三', //指定
            priority: '紧急',
            type: '测试',
            originator: '李四',
            questions: '样式问题',
            acceptance: '王老五', //验收
            acceptanceStatus: '0'
          },
       ],
       tableDetail: {},
       isDisabled: true,
       detailisShow: false
    }
  },
  mounted() {
    
  },
  filters: {
    taskStatus (state) {
        switch (state) {
            case '0':
            return '进行中'
            case '1':
            return '已完成'
            default:
            return ''
        }
    },
    taskStatusColor (state) {
        switch (state) {
            case '0':
            return 'red'
            case '1':
            return 'orange'
            default:
            return ''
        }
    },
    accStatus (state) {
        switch (state) {
            case '0':
            return '未验收'
            case '1':
            return '已验收'
            default:
            return ''
        }
    },
    accStatusColor (state) {
        switch (state) {
            case '0':
            return 'red'
            case '1':
            return 'orange'
            default:
            return ''
        }
    }
  },
  methods: {
    handleClicktabs () {
      
    },
    handleSizeChange (e) {
        this.params.page = e.page
        this.params.limit = e.limit
        console.log(this.params)
    }, 
    // 查看详情
    checkDetail (row) {
        this.tableDetail = {...row}
        this.detailisShow = true
        // console.log(row)
    },
    closeDetail () {
        
        this.detailisShow = false
    }
  }
}
</script>
<style scoped lang="scss">
    .red{color:red;} .blue{color:blue;} .green{color:green;} .orange{color:orange;} .gray{color:gray;}
    .pagination{
        
    }
    .searchItem{
        .selectItem{
            margin: 10px;
        }
        .selectType{
            width: 100px;
        }
        .selectlevel{
            width: 130px;
        }
        .selectStatu{
            width: 130px;
        }
    }
    .addBtn{
        margin-left: 200px;
    }

    .sub-title{
        font-weight: 800;
        padding: 10px 0;
    }
</style>